import React, { Component } from 'react';
import { observer, inject } from "mobx-react";
import { Tabs } from 'antd';
import TabTitle from '@/components/TabTitle/TabTitle'
import http from '@/common/http';
import './UserDetails.less';

const TabPane = Tabs.TabPane;

@inject('rootStore') @observer
class UserDetails extends Component {
  componentDidMount() {
    const param = {
      id: this.props.match.params.id
    }
    http.get('/member/detail', param)
    .then((response) => {
      if (response.success) {

      }
    })
  }

  render() {
    const breadCrumb = ['User', 'User List', 'Details']

    return (
      <div className="news-edit">
        <TabTitle
          title="User Details"
          breadCrumb={breadCrumb} />
        <div className="page-content edit-form mt132">
          <div className="user-details-form">
            <div className="user-details-left">
              <div className="user-avatar">
                <img
                  className="avatar-image"
                  alt=""
                  src="https://blog-1251625630.cos.ap-guangzhou.myqcloud.com/head.jpg?q-sign-algorithm=sha1&q-ak=AKID0hXq6ewSoka8w21aPxpiPlPSKFl6DQ1i&q-sign-time=1549938668;1549940468&q-key-time=1549938668;1549940468&q-header-list=&q-url-param-list=&q-signature=f47afaa94e05f232fb27b0288682dfb17aa7bb35&x-cos-security-token=acd6f17b3b2761c12cb212505b061fb0699fc43210001" />
                <div className="avatar-name">Terminator</div>
              </div>
              <div className="user-numerical">
                <div className="integral">
                  <div className="number">234</div>
                  <div className="name">Integral</div>
                </div>
                <div className="cash">
                  <div className="number">234</div>
                  <div className="name">Cash</div>
                </div>
              </div>
              <div className="user-details">
                <div>Phone: 833333333</div>
                <div>Phone: 833333333</div>
              </div>
            </div>
            <div className="user-details-right">
              <Tabs defaultActiveKey="1">
                <TabPane tab="Contribute" key="1"></TabPane>
              </Tabs>
              <div className="details-table">

                {
                  /*
                  <Table
                    rowKey="id"
                    className="select-table"
                    dataSource={this.props.dataSource}
                    columns={columns}
                    pagination={false} />
                  <Pagination
                    className="tr mt10"
                    showQuickJumper
                    showSizeChanger
                    showTotal={total => `Total ${total}`}
                    total={this.dataTotal}
                    onChange={this.props.pageOnChange}
                    onShowSizeChange={this.props.pageSizeOnChange}
                    current={this.props.pageCurrent} />
                  */
                }

              </div>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

export default UserDetails;
